<template>
<div id="ChuruList" class="page-blank">
  <van-nav-bar title="出入库" left-arrow @click-left="goBack()"/>
  <van-search v-model.trim="searchValue" placeholder="请输入业务员名称" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="tongji-box" v-for="(item, index) in list" :key="index" @click="showBlank( item )">
        <div class="tongji-item">
          <div class="tongji-row">
            <div>申请时间：</div>
            <div>{{ item.createTime }}</div>
          </div>
          <div class="tongji-row">
            <div>机柜数：</div>
            <div>{{ item.equipmentNum }}</div>
          </div>
          <div class="tongji-row">
            <div>充电宝数：</div>
            <div>{{ item.chargerNum }}</div>
          </div>
          <div class="tongji-row">
            <div>业务员：</div>
            <div>{{ item.salesmanName }}</div>
          </div>
          <div class="tongji-row">
            <div>业务员编号：</div>
            <div>{{ item.salesmanId }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>  
    
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar :title="blank.name" left-arrow @click-left="blank.show = false"/>
      <div class="flex-body">   
        <van-cell-group>  
          <van-field :value="blank.equipmentNumberList.length + '/' + blank.AllequipmentNumber" readonly label="机柜数"/>
          <van-field :value="blank.chargerNumberList.length + '/' + blank.AllchargerNumber" readonly label="充电宝数"/>
          <van-button round type="info" size="small" @click="saoma">扫码</van-button>
          <van-button round type="info" size="small" :loading="submitLoading" @click="submit">提交</van-button>
          <van-button round type="info" size="small" :loading="submitLoading" @click="jujue">拒绝</van-button>
        </van-cell-group>
      </div>
    </div>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
declare const wx: any;

@Component
export default class ChuruList extends Vue {

  statusName: any = [ '审批中', '已同意', '未同意' ]

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''

  onSearch() {
    this.page = 1;
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList();
  }
  getList() {
    let page = this.page, size = 10;
    axios.get('/api/bjk/applyList', { page, size, applyStatus: 0 }).then((res: any) => {
      if ( this.page != page ) return ;
      this.page = page + 1;
      let json = res || {}; 
      let list = json.list || [];
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  submitLoading: any = false
  blank: any = {
    show: false,
    name: '设备出库',
    status: 0,
    AllequipmentNumber: 0,
    AllchargerNumber: 0,
    equipmentNumber: 0,
    chargerNumber: 0,
    equipmentNumberList: [],
    chargerNumberList: []
  }
  showBlank(item: any) {
    this.blank.applyId = item.id;
    this.blank.AllequipmentNumber = item.equipmentNum;
    this.blank.AllchargerNumber = item.chargerNum;
    this.blank.equipmentNumberList = [];
    this.blank.chargerNumberList = [];
    this.blank.show = true;
  }
  saoma() {    
    let config = this.$store.state.config;
    wx.config({ ...config, debug: false, jsApiList: [ 'scanQRCode', 'chooseImage', 'uploadImage', 'getLocation', 'openLocation' ] });
    wx.scanQRCode({
      needResult: 1, 
      scanType: [ "qrCode" ], 
      success: (res: any) => {
        let result = res.resultStr; 
        if ( result.indexOf('dianxiaotong') > -1 ) {
          let sn = result.split('=')[1];
          if ( isNaN( sn[0] ) ) {
            axios.get('/api/chargerPlaEquipmentController/getSnById', {
              id: result.split('=')[1]
            }).then((res: any) => {
              this.jianyan( res, true );
            });
          } else {
              this.jianyan( sn, true );
          }
        } else {
          if ( result.indexOf('=') > 0 ) {
            this.jianyan( result.split('=')[1], false );
          } else {
            this.jianyan( result, false );
          }
        }
      }
    });
  }
  jianyan( equipmentId: any, type: any ) {
    if( type ) {
      if( this.blank.equipmentNumberList.indexOf( equipmentId ) > -1 ) {
        this.$toast('该设备编码已经在列表中');
      } else {
        this.blank.equipmentNumberList.push( equipmentId );
      }
    } else {
      if( this.blank.chargerNumberList.indexOf( equipmentId ) > -1 ) {
        this.$toast('该充电宝编码已经在列表中');
      } else {
        this.blank.chargerNumberList.push( equipmentId );
      }
    }
    // 判断设备列表满了吗
    if( this.blank.equipmentNumberList.length < this.blank.AllequipmentNumber || this.blank.chargerNumberList.length < this.blank.AllchargerNumber ) {
      this.$toast(`已成功扫码${ this.blank.equipmentNumberList.length }个机柜，${ this.blank.chargerNumberList.length }个充电宝。`);
      this.saoma();
    } else {
      this.$toast('设备列表已扫码完毕，请点击提交');
    } 
  }
  submit() {
    if( this.blank.equipmentNumberList.length != this.blank.AllequipmentNumber ) {
      this.$toast('机柜数不对');
      return ;
    }
    if( this.blank.chargerNumberList.length != this.blank.AllchargerNumber ) {
      this.$toast('充电宝数不对');
      return ;
    }
    let terminalSnList = this.blank.equipmentNumberList.slice(0);
    let chargerSnList = this.blank.chargerNumberList.slice(0);
    axios.post('/api/bjk/outApproval', {
      applyId: this.blank.applyId, terminalSnList, chargerSnList
    }).then((res: any) => {
      this.$toast('操作成功');
      this.blank.show = false;
      this.onSearch();
    });
  }

  jujue() {
    axios.post('/api/bjk/rejectApply', {
      query: { applyId: this.blank.applyId } 
    }).then((res: any) => {
      this.$toast('已拒绝');
      this.blank.show = false;
      this.onSearch();
    });
  }

  goBack() {
    this.$router.go(-1);
  }

  created() {
  }
  
};
</script>

<style lang="scss">
#ChuruList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; 
}
</style>

